<template>
    <div id="pie"></div>
</template>
<script>
let myChart
export default {
  name:'purchase-pie-chart',
  // props:['data'],
  data(){
    return {
    }
  },
  mounted(){
    this.drawPie()
  },
  methods:{
    // 采购品类分析环形图
    drawPie(){
      // 基于准备好的dom，初始化echarts实例
      if (myChart != null && myChart !== '' && myChart !== undefined){
        myChart.dispose()//销毁
      }
      myChart = this.$echarts.init(document.getElementById('pie'))
      let seriesdata1 = [
        {value:1048, name:'搜索引擎'},
        {value:735, name:'直接访问'},
        {value:580, name:'邮件营销'},
        {value:484, name:'联盟广告'},
        {value:300, name:'视频广告'}
      ]
      let objData = array2obj(seriesdata1, 'name')
      function array2obj (array, key){
        let resObj = {}
        for (let i = 0; i < array.length; i++){
          resObj[array[i][key]] = array[i]
        }
        return resObj
      }
      let dataName = []
      let total = 0
      seriesdata1.forEach((res) => {
        dataName.push(res.name)
        total += parseFloat(res.value) * 10000
      })
      total = total / 10000
      // 绘制图表
      myChart.setOption({
        title:{
          zlevel:0,
          text:[
            '{name|采购数量}',
            '{value|' + total + '}'
          ].join('\n'),
          rich:{
            value:{
              color:'#303133',
              fontSize:40,
              fontWeight:'bold',
              lineHeight:40
            },
            name:{
              color:'#909399',
              lineHeight:20
            }
          },
          top:'center',
          left:'185',
          textAlign:'center',
          textStyle:{
            rich:{
              value:{
                color:'#303133',
                fontSize:40,
                fontWeight:'bold',
                lineHeight:40
              },
              name:{
                color:'#909399',
                lineHeight:28,
                padding:[0,0,28,0],
                fontSize:16
              }
            }
          }
        },
        tooltip:{
          trigger:'item'
        },
        legend:{
          'show':true,
          //icon: 'circle',
          orient:'vertical',
          x:'right',
          top:'15%',
          left:'58%',
          itemGap:25,
          itemWidth:15,
          itemHeight:12,
          data:seriesdata1,
          formatter:function (name){
            return '{a|' + name +'}{b|' +objData[name].value.toFixed(0) +'}{c|' + Number((objData[name].value*100/total)).toFixed(2) +'%}'
          },
          textStyle:{
            rich:{
              a:{
                align:'center',
                fontSize:14,
                width:30,
                //fontWeight: 600,
                padding:[0, 0, 0, 30]
              },
              b:{
                align:'center',
                fontSize:14,
                width:10,
                //fontWeight: 600,
                padding:[0, 0, 0, 60]
              },
              c:{
                align:'center',
                fontSize:14,
                width:10,
                //fontWeight: 600,
                padding:[0, 0, 0, 50]
              }
            }
          }
        },
        series:[
          {
            // name:'访问来源',
            type:'pie',
            radius:['70%', '96%'],
            center:['28%','50%'],
            avoidLabelOverlap:false,
            itemStyle:{
              borderRadius:2,
              borderColor:'#fff',
              borderWidth:2
            },
            label:{
              show:false,
              position:'center'
            },
            emphasis:{
              label:{
                show:false,
                fontSize:'20',
                fontWeight:'bold'
              }
            },
            labelLine:{
              show:false
            },
            data:seriesdata1
          }
        ]
      })
    }
  }

}
</script>